<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            /* border: 1px solid #666; */
            background-color: rgb(181, 226, 18);
            border: 1px solid #000;
            background-size: 100% 100%;
            border-radius: 50%;
            margin: 20px auto;
            position: relative;
        }
        
        .boxS {
            width: 2px;
            height: 150px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50px;
            transform: rotate(0deg);
            transform-origin: center bottom;
            z-index: 3;
        }
        
        .boxM {
            width: 3px;
            height: 110px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 90px;
            transform: rotate(0deg);
            transform-origin: center bottom;
            z-index: 2;
        }
        
        .boxH {
            width: 4px;
            height: 80px;
            background-color: skyblue;
            position: absolute;
            left: 50%;
            top: 120px;
            transform: rotate(0deg);
            transform-origin: center bottom;
            z-index: 1;
        }
    </style>
</head>

<body>
    <script>
        // 1实现一个myForEach方法达到内置forEach效果
        var arr = ["张三", "李四", "王五"];
        arr.forEach(function(item, key, arr) {
            console.log(item, key, arr);
        });

        function myForEach(arr, fn) {
            for (var i = 0; i < arr.length; i++) {
                fn(arr[i], i, arr);
            }
        }
        myForEach(arr, function(item, key, arr) {
            console.log(item, key, arr);
        });
        //    2, 实现一个myEvery方法达到内置every效果
        var arr = [1, 2, 3, 4, 5];
        Array.prototype.myEvery = function(fn) {
            var res = true;
            for (var i = 0; i < arr.length; i++) {
                var t = fn(arr[i], i, arr);
                if (!t) {
                    return (res = false);
                }
            }
            return res;
        };
        var res = arr.myEvery(function(item, key, arr) {
            console.log(item, key, arr);
            return item < 3;
        });
        console.log(res);
    </script>
    <!-- 3.时钟 -->
    <div class="box">
        <div class="boxS"></div>
        <div class="boxM"></div>
        <div class="boxH"></div>
    </div>

    <script>
        var oBoxS = $(".boxS");
        // console.log(oBoxS);
        var oBoxM = $(".boxM");
        var oBoxH = $(".boxH");

        function zb() {
            var time = new Date();
            var s = time.getSeconds();
            var min = time.getMinutes();
            var hours = time.getHours();
            var deg = s * 6;
            var deg1 = min * 6.1;
            var deg2 = hours * 30.1;

            oBoxS.style.transform = `rotate(${deg}deg)`;
            oBoxM.style.transform = `rotate(${deg1}deg)`;
            oBoxH.style.transform = `rotate(${deg2}deg)`;
        }

        zb();
        var t = setInterval(function() {
            zb();
        }, 1000);

        function $(ele) {
            return document.querySelector(ele);
        }
    </script>
</body>

</html>